<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 6.0.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto Serif SC:300,300italic,400,400italic,700,700italic|Roboto Mono:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-bounce.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"zhiruozzy.cn","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"default"},"back2top":{"enable":"truw","sidebar":true,"scrollpercent":true},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="自学的时候做的笔记，以供之后回来查阅，估计会有很多表述不准确甚至出错的地方，随着学习的加深会慢慢修正补充知识的。 ​                                                     ——2022.03.05">
<meta property="og:type" content="article">
<meta property="og:title" content="JS学习笔记">
<meta property="og:url" content="http://zhiruozzy.cn/2022/03/05/JS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E8%87%AA%E7%94%A8%EF%BC%89/index.html">
<meta property="og:site_name" content="芷若">
<meta property="og:description" content="自学的时候做的笔记，以供之后回来查阅，估计会有很多表述不准确甚至出错的地方，随着学习的加深会慢慢修正补充知识的。 ​                                                     ——2022.03.05">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://zhiruozzy.cn/img/JS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E8%87%AA%E7%94%A8%EF%BC%89/image-20220406113534393.png">
<meta property="og:image" content="http://zhiruozzy.cn/img/JS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E8%87%AA%E7%94%A8%EF%BC%89/image-20220406163915820.png">
<meta property="article:published_time" content="2022-03-05T06:19:10.000Z">
<meta property="article:modified_time" content="2022-04-07T14:06:07.153Z">
<meta property="article:author" content="芷若">
<meta property="article:tag" content="笔记">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://zhiruozzy.cn/img/JS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E8%87%AA%E7%94%A8%EF%BC%89/image-20220406113534393.png">

<link rel="canonical" href="http://zhiruozzy.cn/2022/03/05/JS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E8%87%AA%E7%94%A8%EF%BC%89/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>JS学习笔记 | 芷若</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<!-- hexo injector head_end start -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-math@4.0.0/dist/style.css">
<!-- hexo injector head_end end --><link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css">
<link rel="stylesheet" href="/css/prism-line-numbers.css" type="text/css"></head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">芷若</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-主页">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>主页</a>

  </li>
        <li class="menu-item menu-item-关于">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
        <li class="menu-item menu-item-标签">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-目录">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>目录</a>

  </li>
        <li class="menu-item menu-item-归档">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container"></div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="algolia-results">
  <div id="algolia-stats"></div>
  <div id="algolia-hits"></div>
  <div id="algolia-pagination" class="algolia-pagination"></div>
</div>

      
    </div>
  </div>

</div>
    </header>

    
  <div class="reading-progress-bar"></div>

  <a href="https://github.com/zhiruozzy" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://zhiruozzy.cn/2022/03/05/JS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E8%87%AA%E7%94%A8%EF%BC%89/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/touxiang.jpg">
      <meta itemprop="name" content="芷若">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="芷若">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          JS学习笔记
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2022-03-05 14:19:10" itemprop="dateCreated datePublished" datetime="2022-03-05T14:19:10+08:00">2022-03-05</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-04-07 22:06:07" itemprop="dateModified" datetime="2022-04-07T22:06:07+08:00">2022-04-07</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">计算机笔记</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>26k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>23 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>自学的时候做的笔记，以供之后回来查阅，估计会有很多表述不准确甚至出错的地方，随着学习的加深会慢慢修正补充知识的。</p>
<p>​                                                     ——2022.03.05</p>
<span id="more"></span>

<h2 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h2><p>事件，就是发生的事情，比如点击某个元素，将鼠标移动到某个元素的上方，按下键盘上的某个键</p>
<h3 id="拖拽box元素"><a href="#拖拽box元素" class="headerlink" title="拖拽box元素"></a>拖拽box元素</h3><p>需要进行三个步骤（其实就是对应了三个事件）</p>
<ol>
<li>当鼠标在被拖拽元素上按下（不是点一下）时，开始拖拽 ：onmousedown</li>
<li>当鼠标移动时，被拖拽元素随鼠标移动 : onmousemove</li>
<li>当鼠标松开时，被拖拽元素固定在当前位置: onmouseup</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">//拖谁给谁绑定响应函数，本题拖拽的时box1，所以给box1绑定</span><br><span class="line">var box1 </span><br></pre></td></tr></table></figure>



<h2 id="JS的常用书写方式"><a href="#JS的常用书写方式" class="headerlink" title="JS的常用书写方式"></a>JS的常用书写方式</h2><ol>
<li><h3 id="内嵌式"><a href="#内嵌式" class="headerlink" title="内嵌式"></a>内嵌式</h3><ul>
<li><p>在HTML的<code>&lt;body&gt;</code>标签中放入<code>&lt;script type=&quot;text/javascipt&quot;&gt; &lt;/script&gt;</code>标签对中，并在<code>&lt;script&gt;</code>标签对里书写代码</p>
</li>
<li><p>如果要将JS代码写在<code>&lt;head&gt;</code>中，就需要用window.onload&#x3D;function(){  }包裹起来</p>
</li>
</ul>
</li>
<li><h3 id="外链式"><a href="#外链式" class="headerlink" title="外链式"></a>外链式</h3><p>在HTML的<code>&lt;body&gt;</code>标签中放入<code>&lt;script src=&quot;相对路径&quot;&gt;&lt;/script&gt;</code></p>
</li>
</ol>
<h2 id="JS输出语句"><a href="#JS输出语句" class="headerlink" title="JS输出语句"></a>JS输出语句</h2><ol>
<li>弹窗输出 <code>alert();</code> 弹窗处alert中的内容</li>
<li>弹窗确认 <code>confirm(); </code> 弹窗出confirm中的内容，弹窗上有“确认”和“取消”两个按钮</li>
<li>网页内容区输出：<code>document.write()</code>  直接输出在网页页面上</li>
<li>控制台输出：<code>console.log()</code> 输出在控制台</li>
</ol>
<h2 id="JS数据类型"><a href="#JS数据类型" class="headerlink" title="JS数据类型"></a>JS数据类型</h2><ul>
<li>基本数据类型（参数赋值的时候，传数值） ：String字符串，Number数值，Brglnt大型数值，Boolean布尔值，Null空值，Undefined 未定义，Symbol</li>
<li>引用数据类型（参数赋值的时候，传地址）：Object对象（只有这一种）</li>
</ul>
<h2 id="JS的字符串拼接"><a href="#JS的字符串拼接" class="headerlink" title="JS的字符串拼接"></a>JS的字符串拼接</h2><p>JS中字符串可以拼接，用“+”就可以拼接，</p>
<h3 id="拼接语法："><a href="#拼接语法：" class="headerlink" title="拼接语法："></a>拼接语法：</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">字符串 + 任意数据类型 = 拼接后的新字符串；</span><br></pre></td></tr></table></figure>

<h3 id="拼接规则："><a href="#拼接规则：" class="headerlink" title="拼接规则："></a>拼接规则：</h3><p>拼接前，会把与字符串相加的数据类型转化为字符串，然后再拼接成一个新的字符串。</p>
<h3 id="代码举例："><a href="#代码举例：" class="headerlink" title="代码举例："></a>代码举例：</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">											   输出结果</span><br><span class="line"><span class="keyword">var</span> str1 = <span class="string">&quot;长安&quot;</span>+<span class="string">&quot;归故里&quot;</span>;  <span class="comment">//字符串+字符串类型    长安归故里</span></span><br><span class="line"><span class="keyword">var</span> str2 = <span class="string">&quot;长安&quot;</span>+<span class="number">666</span>;  <span class="comment">//字符串+数值类型          长安666           </span></span><br><span class="line"><span class="keyword">var</span> str3 = <span class="string">&quot;长安&quot;</span>+<span class="literal">true</span>; <span class="comment">//字符串+布尔类型          长安true</span></span><br><span class="line"><span class="keyword">var</span> str4 = <span class="string">&quot;长安&quot;</span>+<span class="literal">null</span>; <span class="comment">//字符串+空类型            长安null</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;<span class="attr">name</span>:<span class="string">&#x27;芷若&#x27;</span>,<span class="attr">age</span>:<span class="number">19</span>&#125;;</span><br><span class="line"><span class="keyword">var</span> str5 = <span class="string">&quot;长安&quot;</span>+obj;  <span class="comment">//字符串+object类型     长安[object Object] </span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h2><p>对象是一种复合的数据类型，在对象中可以保存多个不同的数据类型的属性</p>
<h3 id="对象的分类"><a href="#对象的分类" class="headerlink" title="对象的分类"></a>对象的分类</h3><ol>
<li><p>内置对象：<br>由ES标准中定义的对象，比如：Object、Math、Date、Function等。</p>
</li>
<li><p>宿主对象：</p>
<p>由JS的运行环境（浏览器）提供的对象，比如：BOM，DOM</p>
</li>
<li><p>自定义对象：</p>
<p>由开发人员自己创建出来的对象</p>
</li>
</ol>
<p>注意：通过new关键字创建出来的对象实例，都是对象类型</p>
<h3 id="对象的创建方法"><a href="#对象的创建方法" class="headerlink" title="对象的创建方法"></a>对象的创建方法</h3><ol>
<li><p>使用<strong>内置</strong>的构造函数创建对象（工厂模式）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> student = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line">student.<span class="property">name</span> = <span class="string">&quot;芷若&quot;</span>;</span><br></pre></td></tr></table></figure>

<p>弊端：使用的构造函数都是Object，所以创建的对象都是Object这个类型，导致无法区分多种不同类型的对象</p>
</li>
<li><p>使用对象字面量创建对象</p>
<p>字面量：为变量赋值时的常数量</p>
<p>对象字面量：封闭在花括号对{}中的对象的零个或多个“属性名：值”的列表。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//多个“属性名：值”</span></span><br><span class="line"><span class="keyword">var</span> student =&#123;</span><br><span class="line">      <span class="attr">name</span>:<span class="string">&quot;芷若&quot;</span>;</span><br><span class="line">      <span class="attr">age</span>:<span class="number">19</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//零个</span></span><br><span class="line"><span class="keyword">var</span> student = &#123;&#125;;</span><br></pre></td></tr></table></figure>


</li>
<li><p>利用构造函数创建对象</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//先自己创建一个构造函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Star</span>(<span class="params">name,age</span>)&#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span>=name;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">age</span>=age;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">sing</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我会唱歌&#x27;</span>);</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//再用自建的构造函数创建对象</span></span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> <span class="title class_">Star</span>(<span class="string">&quot;双笙&quot;</span>,<span class="number">18</span>);</span><br><span class="line"><span class="keyword">var</span> person2 = <span class="keyword">new</span> <span class="title class_">Star</span>(<span class="string">&quot;林俊杰&quot;</span>,<span class="number">20</span>);</span><br><span class="line">person1.<span class="title function_">sing</span>(); </span><br><span class="line">person2.<span class="title function_">sing</span>();</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="对象的赋值和修改"><a href="#对象的赋值和修改" class="headerlink" title="对象的赋值和修改"></a>对象的赋值和修改</h3><ul>
<li>这是基本数据类型：</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name1 = <span class="string">&quot;长安&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> name2 = name1;</span><br><span class="line">name2 = <span class="string">&quot;故里&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1); <span class="comment">//输出结果：长安</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name2); <span class="comment">//输出结果：故里</span></span><br></pre></td></tr></table></figure>

<ul>
<li>这是object类型（对象）：</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj1 = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line">obj1.<span class="property">name</span>=<span class="string">&quot;长安&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> obj2 = obj1;</span><br><span class="line">obj2.<span class="property">name</span> = <span class="string">&quot;故里&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1); <span class="comment">//输出结果：故里</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name2); <span class="comment">//输出结果：故里</span></span><br></pre></td></tr></table></figure>

<p>object类型赋值后竟然会改变本体。这里的object就相当于C语言中的一个指针指向的内容，而将obj1赋值给obj2就相当于让obj2也指向了这块内容，所以修改obj2所指向的内容后，自然也就修改了obj1</p>
<p>JS中的对象和C++中的对象相似之处：</p>
<ol>
<li><p>作用都是封装信息，比如一个student类中可以封装学生的姓名，年龄。成绩</p>
</li>
<li><p>C++中的对象有成员函数和成员变量。JS中的对象也是如此，不过叫的是特征（属性）和行为（方法）</p>
</li>
</ol>
<h4 id="获取对象中的属性："><a href="#获取对象中的属性：" class="headerlink" title="获取对象中的属性："></a>获取对象中的属性：</h4><p><strong>方式1</strong>：<code>对象.属性名</code></p>
<h2 id="基本包装类型"><a href="#基本包装类型" class="headerlink" title="基本包装类型"></a>基本包装类型</h2><h3 id="三个基本包装类："><a href="#三个基本包装类：" class="headerlink" title="三个基本包装类："></a>三个基本包装类：</h3><ul>
<li><p>String():将基本数据类型的字符串，转换为String对象</p>
</li>
<li><p>Number():将基本数据类型的数字，转化为Number对象</p>
</li>
<li><p>Boolean():将基本数据类型的布尔值，转化为Boolean对象</p>
</li>
</ul>
<h3 id="转换方法："><a href="#转换方法：" class="headerlink" title="转换方法："></a>转换方法：</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str1 = <span class="string">&#x27;qianguyihao&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> str2 = <span class="keyword">new</span> <span class="title class_">String</span>(<span class="string">&#x27;qianguyihao&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> num = <span class="keyword">new</span> <span class="title class_">Number</span>(<span class="number">3</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> bool = <span class="keyword">new</span> <span class="title class_">Boolean</span>(<span class="literal">true</span>);</span><br></pre></td></tr></table></figure>

<p>str2，num, bool的类型都是object</p>
<p>将基本数据类型转化为对象后，就可以绑定属性和方法了</p>
<h3 id="String-对象常用方法"><a href="#String-对象常用方法" class="headerlink" title="String()对象常用方法"></a>String()对象常用方法</h3><ol>
<li><p>indexOf()&#x2F;lastIndexOf():获取字符串中指定内容（字符或字符串）的索引</p>
<ul>
<li><p>语法一：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">索引值 = str.<span class="title function_">indexOf</span>(查询的字符或者字符串)</span><br></pre></td></tr></table></figure>

<p>indexOf() 是从前向后查找，lastIndexOf()是从后向前查找，如果找到了，返回第一次出现的索引，如果没有找到，返回-1</p>
</li>
<li><p>语法二：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">索引值 = str.indexOf(查询的字符串，起始的下标位置)</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p>charAt(index)获取指定位置的字符</p>
<p>str.charAt(index)和str[index]等价</p>
</li>
</ol>
<h3 id="Number-对象常用方法"><a href="#Number-对象常用方法" class="headerlink" title="Number()对象常用方法"></a>Number()对象常用方法</h3><ol>
<li><p>Number.isInteger()判断是否为整数</p>
<p>语法：<code>布尔值 = Number。isInteger(数字);</code></p>
</li>
<li><p>toFixed()小数点后面保留几位</p>
<p>语法：<code>字符串 = myNum.toFixed(num);</code></p>
<p>解释：将对象myNum的小数点后面保留num位小数（四舍五入），不会改变原数字，返回的是字符串</p>
</li>
</ol>
<h3 id="Math-对象的方法"><a href="#Math-对象的方法" class="headerlink" title="Math()对象的方法"></a>Math()对象的方法</h3><p><strong>注意：调用Math对象的方法时，不需要创建对象，即不需要通过new来调用，直接使用即可</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = -<span class="number">0.6</span>;</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="title function_">abs</span>(num));        <span class="comment">//取绝对值</span></span><br><span class="line"></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="title function_">floor</span>(num));      <span class="comment">//向下取整，向小取</span></span><br><span class="line"></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="title function_">ceil</span>(num));       <span class="comment">//向上取整，向大取</span></span><br><span class="line"></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="title function_">round</span>(num));      <span class="comment">//四舍五入取整（正数四舍五入，负数五舍六入）</span></span><br><span class="line"></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>());        <span class="comment">//生成0-1之间的随机数</span></span><br></pre></td></tr></table></figure>

<h2 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h2><p>数组中可以存放<strong>任意对象</strong>的数据，比如：字符串，数字，布尔值，甚至是对象</p>
<h3 id="创建数组对象"><a href="#创建数组对象" class="headerlink" title="创建数组对象"></a>创建数组对象</h3><ol>
<li><p>和C语言一样的创建方法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr1 = []; <span class="comment">//创建一个空的数组</span></span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]; <span class="comment">//创建并初始化数组</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>特有：用构造函数创建数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = =<span class="keyword">new</span> <span class="title class_">Arrat</span>(参数);</span><br></pre></td></tr></table></figure>

<ul>
<li><p>如果参数为空，则表示创建一个空数组，如果参数是一个数值，表示创建的数组的长度，如果有多个参数，表示数组中的元素</p>
</li>
<li><p>举例：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr2 = <span class="keyword">new</span> <span class="title class_">Array</span>(); <span class="comment">// 参数为空</span></span><br><span class="line"><span class="keyword">var</span> arr3 = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">4</span>); <span class="comment">// 参数为一个数值</span></span><br><span class="line"><span class="keyword">var</span> arr4 = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">15</span>, <span class="number">16</span>, <span class="number">17</span>); <span class="comment">// 参数为多个数值</span></span><br></pre></td></tr></table></figure>

<p>打印结果：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">arr2 = [];</span><br><span class="line">arr3 = [<span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>];</span><br><span class="line">arr4 = [<span class="number">15</span>, <span class="number">16</span>, <span class="number">17</span>];</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ol>
<h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><ul>
<li>函数也是一个对象</li>
<li>使用typeof 检查一个函数对象时，会返回一个function</li>
</ul>
<h3 id="函数的定义"><a href="#函数的定义" class="headerlink" title="函数的定义"></a>函数的定义</h3><ol>
<li><p>利用函数关键字自定义函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> 函数明(形参<span class="number">1</span>，形参<span class="number">2.</span>..形参n)&#123;</span><br><span class="line">    语句;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>举例：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fun1</span>(<span class="params">a, b</span>)&#123;</span><br><span class="line">	<span class="keyword">return</span> a+b;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>利用函数表达式（匿名函数）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> 变量名 = <span class="keyword">function</span>(<span class="params">形参<span class="number">1</span>，形参<span class="number">2</span>,...形参n</span>)&#123;</span><br><span class="line">     语句;</span><br><span class="line">&#125;; <span class="comment">//注意这里有个分号，表示赋值语句结束</span></span><br></pre></td></tr></table></figure>

<p>举例：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fun2 = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;我是匿名函数中的代码&quot;</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//这里调用的时候有两种等价的写法</span></span><br><span class="line"><span class="keyword">var</span> v = <span class="keyword">new</span> <span class="title class_">Vehicle</span>();</span><br><span class="line"><span class="keyword">var</span> v = <span class="keyword">new</span> <span class="title class_">Vehicle</span>; <span class="comment">//不推荐这样写</span></span><br></pre></td></tr></table></figure>

<p><strong>注意：</strong></p>
<ul>
<li>fun2是变量名，不是函数名</li>
<li>函数表达式实际就是将匿名函数赋值给一个变量</li>
</ul>
</li>
</ol>
<h3 id="函数的调用"><a href="#函数的调用" class="headerlink" title="函数的调用"></a>函数的调用</h3><ol>
<li><p>普通函数的调用</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">函数名();</span><br></pre></td></tr></table></figure>

<p>或者</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">函数名.call();</span><br></pre></td></tr></table></figure>

<p>举例：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>) &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是函数体里面的内容1&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn2</span>(<span class="params"></span>) &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是函数体里面的内容2&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">fn1</span>(); <span class="comment">// 调用函数</span></span><br><span class="line"></span><br><span class="line">fn2.<span class="title function_">call</span>(); <span class="comment">// 调用函数</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
<li><p>通过对象的方式调用</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义一个类</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;圣米歇尔山&quot;</span>, <span class="comment">//注意这里是逗号</span></span><br><span class="line">  <span class="attr">draw</span>: <span class="keyword">function</span>&#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;圣米歇尔山在哪里捏？&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//调用对象的函数</span></span><br><span class="line">obj.<span class="title function_">draw</span>();</span><br></pre></td></tr></table></figure>
</li>
<li><p>立即执行函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;为什么立即执行函数这么多括号？！！&#x27;</span>);</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

<p>举例：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">(<span class="keyword">function</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;a = &quot;</span> + a);</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;b = &quot;</span> + b);</span><br><span class="line">&#125;)(<span class="number">123</span>, <span class="number">456</span>);</span><br></pre></td></tr></table></figure>

<p>注意：立即执行函数在定义之后就会自动调用，这种函数通常只执行一次，因为没有变量保存它，执行完就找不到了（昙花一现）</p>
</li>
<li><p>用构造函数来调用</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name, gender, hobby</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">gender</span> = gender;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">hobby</span> = hobby;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">age</span> = <span class="number">6</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> p1 = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&#x27;zs&#x27;</span>, <span class="string">&#x27;男&#x27;</span>, <span class="string">&#x27;basketball&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> p2 = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&#x27;ls&#x27;</span>, <span class="string">&#x27;女&#x27;</span>, <span class="string">&#x27;dancing&#x27;</span>);</span><br></pre></td></tr></table></figure>

<p>构造函数：专门来生成对象的函数，它提供模板，描述对象的基本结构，一个构造函数可以通过new来生成多个对象，这些对象都有相同的结构。</p>
</li>
<li><p>绑定事件函数</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;btn&quot;</span>&gt;</span>我是按钮<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">var</span> btn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;btn&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//2.绑定事件</span></span></span><br><span class="line"><span class="language-javascript">            btn.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;点击按钮后，弹出了我&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">            &#125;;</span></span><br><span class="line"><span class="language-javascript">        </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>给点击这个操作绑定了事件（弹窗）</p>
</li>
</ol>
<h3 id="函数的传参"><a href="#函数的传参" class="headerlink" title="函数的传参"></a>函数的传参</h3><p>JS允许传入任意个参数而不影响调用，因此，传入的参数比定义的参数多没有问题（即使函数内部不需要这些参数），传入的参数比定义的少也没有问题。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">abs</span>(<span class="number">19</span>,<span class="string">&#x27;nalabala&#x27;</span>); <span class="comment">//返回19</span></span><br><span class="line"><span class="title function_">abs</span>(-<span class="number">9</span>,<span class="string">&#x27;haha&#x27;</span>,<span class="string">&#x27;hehe&#x27;</span>,<span class="literal">null</span>); <span class="comment">//返回9</span></span><br><span class="line"><span class="title function_">abs</span>();  <span class="comment">//返回NaN</span></span><br></pre></td></tr></table></figure>



<h3 id="调用函数和获取函数的区别"><a href="#调用函数和获取函数的区别" class="headerlink" title="调用函数和获取函数的区别"></a>调用函数和获取函数的区别</h3><p>获取方法与调用方法</p>
<p>C语言中只能调用方法，不能获取方法，而JS可以，如下例：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line">obj.<span class="property">sayName</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;smyhvae&#x27;</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">sayName</span>);  <span class="comment">//没加括号，就是获取方法</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="title function_">sayName</span>());  <span class="comment">//加了括号，就是调用方法。即：执行函数内容，并执行函数体的内容</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><code> console.log(obj.sayName);</code>执行结果：  </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ƒ () &#123;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;smyhvae&#x27;</span>);     <span class="comment">//直接把方法整s</span></span><br><span class="line">                &#125;</span><br></pre></td></tr></table></figure>

<p><code>console.log(obj.sayName()); </code>执行结果：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">smyhvae <span class="comment">//首先调用函数，执行函数内容</span></span><br><span class="line"><span class="literal">undefined</span>   <span class="comment">//又因为该方法没有返回值，所以输出undefined</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ul>
<li><code>fun()</code>：调用函数。调用之后，还获取了函数的返回值</li>
<li><code>fun</code>：获取函数。相当于直接获取了整个函数对象</li>
</ul>
<h3 id="构造函数"><a href="#构造函数" class="headerlink" title="构造函数"></a>构造函数</h3><p><strong>构造函数</strong>主要用来初始化对象，即为对象成员赋初值，总是与new一起使用，在ES6之前由于没有<strong>类</strong>的概念，所以常把对象的一些公共属性和方法抽取出来。然后封装到构造函数中。</p>
<h4 id="构造函数和普通函数"><a href="#构造函数和普通函数" class="headerlink" title="构造函数和普通函数"></a>构造函数和普通函数</h4><ol>
<li>构造函数的创建方法和普通函数没有区别，都是<code>function 函数名()&#123;  &#125;</code>，不同的是构造函数习惯首字母大写</li>
<li>两者的调用方式不同。普通函数直接调用，而构造函数需要用new关键字来调用</li>
<li>二者this的指向不同。普通函数调用时，如果普通调用，this指向的是window，如果以方法的形式调用，this是调用方法的那个对象。 当以构造函数的形式调用时，this是新创建的实例化对象</li>
<li>返回值：普通函数可以有返回值，也可以没有返回值，但是构造函数没有返回值（不用写return），“new一个构造函数的流程” 会解释为什么不需要返回值</li>
</ol>
<h4 id="书写规范："><a href="#书写规范：" class="headerlink" title="书写规范："></a>书写规范：</h4><ol>
<li><p>使用构造函数创建某一类对象的时候，<strong>首字母要大写</strong>（与普通函数区别开）</p>
</li>
<li><p>构造函数内部使用了<strong>this</strong>关键字，代表了要生成的对象实例</p>
</li>
<li><p>构造函数生成对象的时候，必须要用new指令</p>
<p>举例：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//先自己创建一个构造函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Star</span>(<span class="params">name,age</span>)&#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span>=name;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">age</span>=age;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">sing</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我会唱歌&#x27;</span>);</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//再用自建的构造函数创建对象</span></span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> <span class="title class_">Star</span>(<span class="string">&quot;双笙&quot;</span>,<span class="number">18</span>);</span><br><span class="line"><span class="keyword">var</span> person2 = <span class="keyword">new</span> <span class="title class_">Star</span>(<span class="string">&quot;林俊杰&quot;</span>,<span class="number">20</span>);</span><br><span class="line">person1.<span class="title function_">sing</span>(); </span><br><span class="line">person2.<span class="title function_">sing</span>();</span><br></pre></td></tr></table></figure></li>
</ol>
<h4 id="New一个构造函数的流程"><a href="#New一个构造函数的流程" class="headerlink" title="New一个构造函数的流程"></a>New一个构造函数的流程</h4><ol>
<li>开辟内存空间，在内存中创建新的空对象</li>
<li>让this指向这个新的空对象</li>
<li>执行构造函数里的代码，为这个新对象添加属性和方法</li>
<li>返回这个新对象（所以构造函数里面不需要return）</li>
</ol>
<h4 id="实例成员和动态成员"><a href="#实例成员和动态成员" class="headerlink" title="实例成员和动态成员"></a>实例成员和动态成员</h4><p><strong>成员</strong>:成员包括构造函数中的属性和方法</p>
<p>JS的构造函数中可以添加一些成员。添加方法有两种：①在构造函数本身上添加②在构造函数内部的this上添加</p>
<p><strong>实例成员</strong>：构造函数中用this添加的成员，实例成员只能通过实例化对象来访问。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//用this来添加实例成员，下面的name,age,sing都是实例成员</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Star</span>(<span class="params">name,age</span>)&#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span>=name;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">age</span>=age;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">sing</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我会唱歌&#x27;</span>);</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//实例成员只能通过实例化对象访问</span></span><br><span class="line"><span class="comment">//正确访问方法：</span></span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> <span class="title class_">Star</span>(<span class="string">&quot;双笙&quot;</span>,<span class="number">18</span>);</span><br><span class="line">person1.<span class="title function_">sing</span>(); </span><br><span class="line"><span class="comment">//错误访问方法（不可以通过构造函数来访问实例成员）</span></span><br><span class="line"><span class="title class_">Star</span>.<span class="title function_">sing</span>();</span><br></pre></td></tr></table></figure>

<p><strong>静态成员</strong>：在构造函数本身上面添加的成员，只能通过构造函数来访问</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Star</span>(<span class="params">name,age</span>)&#123;</span><br><span class="line">   <span class="variable language_">this</span>.<span class="property">name</span>=name;</span><br><span class="line">   <span class="variable language_">this</span>.<span class="property">age</span>=age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> <span class="title class_">Star</span>(<span class="string">&quot;双笙&quot;</span>,<span class="number">18</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//在构造函数本身上面添加成员</span></span><br><span class="line"><span class="title class_">Star</span>.<span class="property">sex</span> = <span class="string">&quot;女&quot;</span>;</span><br><span class="line"><span class="comment">//正确访问方法：</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Star</span>.<span class="property">sex</span>);</span><br><span class="line"><span class="comment">//错误访问方法：</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person1.<span class="property">sex</span>);</span><br></pre></td></tr></table></figure>

<h3 id="高阶函数"><a href="#高阶函数" class="headerlink" title="高阶函数"></a>高阶函数</h3><p>概念：一个函数A作为另一个函数B的： 1.参数 2.返回值时，我们称函数B为高阶函数。简单来说，高阶函数是 <strong>对其他函数进行操作</strong> 的函数</p>
<p><strong>类型1</strong>：把其他函数作为参数（这个例子我现在还不太理解）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params">a, b, callback</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a + b);</span><br><span class="line">    callback &amp;&amp; <span class="title function_">callback</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">fn1</span>(<span class="number">10</span>, <span class="number">20</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是最后执行的函数&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>试着理解一下吧：</p>
<ol>
<li><code>callback &amp;&amp; callback();</code></li>
</ol>
<ul>
<li><p>callback是回调的意思（call back,回我电话），指当执行栈中的同步任务执行完毕后再执行回调的内容</p>
</li>
<li><p>callback也可以作为函数A的形参，所对应的实参一般是另一个函数B。即执行完了函数A的所有同步任务之后，会执行函数B</p>
</li>
<li><p>callback &amp;&amp; callback();要理解这句话，首先要理解&amp;&amp;逻辑与，先执行左边，如果左边为真，就会执行右边，如果左边为假，就不执行右边。所以A&amp;&amp;B就等价为<code>if(A) &#123;  B &#125;</code> ，因此<code>callback&amp;&amp;callback.call()</code> 就是 <code>if(callback) callback.call()</code>，即如果调用的时候传入了callback所对应的实参，就执行回调函数这个操作，如果没有传入所对应的参数（JS中函数的参数可以缺省），就不执行回调函数这个操作。</p>
</li>
</ul>
<ol start="2">
<li></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">fn1</span>(<span class="number">10</span>, <span class="number">20</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是最后执行的函数&#x27;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>   虽然很优雅的写法，但我第一眼没看出来这是干啥的…..，写成下面这个形式好理解一些<br><code>fn1(10, 20,   function () &#123;console.log(&#39;我是最后执行的函数&#39;);&#125;  );</code><br>   这其实是fn1函数的调用，第三个参数是一个函数，它是作为callback的实参传过去的。</p>
<ol start="3">
<li><p>执行步骤</p>
<p>调用函数，先执行 fn1中的内容：<code>console.log(a + b);</code>，执行完毕后执行回调函数中的内容： <code>console.log(&#39;我是最后执行的函数&#39;);</code></p>
</li>
</ol>
<p><strong>类型二</strong>：把函数作为返回值（常结合闭包）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> a = <span class="number">20</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">function</span> (<span class="params"></span>) &#123; <span class="comment">//将函数作为返回值返回</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(a);</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> foo = <span class="title function_">fn1</span>(); <span class="comment">// 执行 fn1() 之后，会得到一个返回值。这个返回值是函数</span></span><br><span class="line"><span class="title function_">foo</span>();</span><br></pre></td></tr></table></figure>



<h2 id="作用域："><a href="#作用域：" class="headerlink" title="作用域："></a>作用域：</h2><h3 id="分类："><a href="#分类：" class="headerlink" title="分类："></a>分类：</h3><p>全局作用域和局部作用域</p>
<h3 id="访问关系："><a href="#访问关系：" class="headerlink" title="访问关系："></a>访问关系：</h3><ul>
<li>内部作用域可以访问到外部作用域的变量，但在外部作用域无法访问到内部作用域的变量</li>
<li>如果局部作用域和全局作用域的变量重名的话，在局部修改局部作用域的变量的值并不会改变全局作用域的变量的值。</li>
<li>JS的函数在查找变量时从自身函数定义开始，由”内“向”外“查找。如果内部函数定义了域外部函数重名的变量。则内部函数的变量将”屏蔽“外部函数的变量</li>
</ul>
<h2 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h2><p><strong>概念</strong>：指有权访问另一个函数作用域中变量的<strong>函数</strong>。 (closure)</p>
<p>由上面的定义我们知道，闭包是一种函数，如果A函数访问到了B函数内的变量，那么称函数B为闭包函数</p>
<h3 id="常规情况下："><a href="#常规情况下：" class="headerlink" title="常规情况下："></a>常规情况下：</h3><ul>
<li>函数内部可以访问全局变量和局部变量</li>
<li>函数外部只能访问全局变量，不能访问局部变量</li>
<li>当函数执行完毕后，本作用域内的局部变量会被销毁</li>
</ul>
<p>比如下面这样的代码：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="keyword">let</span> a = <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//调用函数</span></span><br><span class="line"><span class="title function_">foo</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a);<span class="comment">//打印报错：Uncaught ReferenceError: a is not defined</span></span><br></pre></td></tr></table></figure>

<p>原因：a是函数内的局部变量，外部无法访问。当调用完foo函数之后，a变量已经被销毁了，所以a无法访问。</p>
<h3 id="闭包函数中："><a href="#闭包函数中：" class="headerlink" title="闭包函数中："></a>闭包函数中：</h3><p>我靠，从这个例子我才发现原来JS中函数可以嵌套定义？！！</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>)&#123;</span><br><span class="line">   <span class="keyword">let</span> a = <span class="number">10</span>;</span><br><span class="line">    <span class="comment">//在</span></span><br><span class="line">   <span class="keyword">function</span> <span class="title function_">fn2</span>(<span class="params"></span>)&#123;</span><br><span class="line">       <span class="variable language_">console</span>.<span class="title function_">log</span>(a);</span><br><span class="line">    &#125;</span><br><span class="line">   <span class="title function_">fn2</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn1</span>();</span><br></pre></td></tr></table></figure>

<p> 上面这个例子也可以这么写：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="keyword">let</span> a = <span class="number">20</span>;</span><br><span class="line">     </span><br><span class="line">     <span class="keyword">return</span> <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(a);</span><br><span class="line">     &#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> foo = <span class="title function_">fn1</span>();  <span class="comment">//fn1的返回值是一个函数</span></span><br><span class="line"><span class="title function_">foo</span>(); <span class="comment">//调用foo</span></span><br></pre></td></tr></table></figure>

<p> 输出结果：10</p>
<ul>
<li>函数fn2只能在fn1中调用，如果在fn1外面调用，将会报错</li>
<li>如果嵌套的内层函数使用了外层函数的变量或参数，即fn2中使用了fn1中的变量a，这个嵌套函数就形成了一个闭包，将fn1成为闭包函数</li>
<li>闭包能在它fn1执行完之后仍然能够访问fn1里的变量和参数</li>
</ul>
<h3 id="闭包的作用"><a href="#闭包的作用" class="headerlink" title="闭包的作用"></a>闭包的作用</h3><p>在上面那个例子中，本来fn1执行完毕后，它里面的变量a会立即销毁，但此时由于产生了闭包，fn1中的变量不会立即销毁，因为fn2函数还要继续调用变量a。</p>
<p>并且，在全局中通过foo()承接fn1的返回值,达到了在全局作用域中也可以访问局部作用域中的变量a</p>
<p>可见，<strong>闭包延伸了变量的作用范围</strong></p>
<h2 id="this"><a href="#this" class="headerlink" title="this"></a>this</h2><p>解析器在调用函数时每次都会像函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象</p>
<p>这个对象我们称为函数执行的上下文对象</p>
<p>根据函数<strong>调用</strong>方式的不同，this会指向不同的对象</p>
<p>以函数形式调用，this的对象是window。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">func1</span>(<span class="params"></span>)&#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;this.window&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">func1</span>();<span class="comment">//直接调用函数，this指向window全局</span></span><br><span class="line">等价于：<span class="variable language_">window</span>.<span class="title function_">fun1</span>();</span><br><span class="line">输出结果：object <span class="title class_">Window</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>以对象的方式调用，this指向调用方法的对象</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"> </span><br><span class="line"> <span class="comment">//把obj的一个属性设置成了函数func1</span></span><br><span class="line"> <span class="keyword">var</span> obj = &#123;</span><br><span class="line">   <span class="attr">sayname</span>:func1</span><br><span class="line">&#125;;</span><br><span class="line">obj.<span class="title function_">sayname</span>();<span class="comment">//以方法的形式调用函数</span></span><br><span class="line"></span><br><span class="line">输出结果：object <span class="title class_">Object</span></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li><strong>普通函数，立即执行函数</strong>调用时，this的指向时window（全局）</li>
<li><strong>以方法的形式</strong>调用时，this指向调用方法的那个对象</li>
<li>以<strong>构造函数</strong>的形式调用时，this指向new出来的对象</li>
<li>以<strong>事件绑定函数</strong>的形式调用时，this指向绑定事件的对象</li>
<li>用<strong>call和apply</strong>调用时，this指向指定的（括号里面的第一个参数）那个对象</li>
</ol>
<h2 id="同步和异步"><a href="#同步和异步" class="headerlink" title="同步和异步"></a>同步和异步</h2><h3 id="JS是单线程"><a href="#JS是单线程" class="headerlink" title="JS是单线程"></a>JS是单线程</h3><p>即同一个时间只能做一件事，比如某个DOM元素进行添加和删除的操作时，不能同时进行，应该先添加，之后再删除。</p>
<p>单线程意味着，所有任务都需要排队，即前一个任务结束，才会执行后一个任务，这样导致的问题是：JS执行的时间过长，页面渲染加载会有阻塞</p>
<h3 id="回调函数"><a href="#回调函数" class="headerlink" title="回调函数"></a>回调函数</h3><p>知乎上一篇文章讲的很好，附上链接：</p>
<p><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/326902537">10张图理解回调函数</a></p>
<h3 id="同步"><a href="#同步" class="headerlink" title="同步"></a>同步</h3><p>前一个任务结束后再执行后一个任务，程序的执行顺序和任务的排列顺序是一致的。比如做饭的同步做法：烧水煮饭（10分钟之后），再去切菜，炒菜。</p>
<h3 id="异步"><a href="#异步" class="headerlink" title="异步"></a>异步</h3><p>在做这件事情同时，还可以去处理其他事情。比如做饭的异步做法：在烧水的同时，利用这10分钟，去切菜，炒菜。</p>
<p>比如下列代码：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>);</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">3</span>);</span><br><span class="line">&#125;,<span class="number">2000</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span>);</span><br></pre></td></tr></table></figure>

<p>输出结果：1   2   3</p>
<p>因为 等待函数要等待2秒钟才执行，所以会先执行console.log(2);</p>
<p>可是如果把时间换成0，即：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>);</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">3</span>);</span><br><span class="line">&#125;,<span class="number">0</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span>);</span><br></pre></td></tr></table></figure>

<p>输出结果依旧是： 1 2 3，为了解决这个问题，我们需要了解</p>
<h3 id="JS的执行机制"><a href="#JS的执行机制" class="headerlink" title="JS的执行机制"></a>JS的执行机制</h3><ol>
<li>先执行执行栈中的同步任务</li>
<li>如果遇到异步任务，将其放入任务队列中，先不执行</li>
<li>当执行栈中的所有同步任务执行完毕后，系统会根据次序读取任务队列中的异步任务，依次执行</li>
</ol>
<h3 id="同步任务："><a href="#同步任务：" class="headerlink" title="同步任务："></a>同步任务：</h3><p>同步任务都在主线程上执行，形成一个执行线</p>
<h3 id="异步任务："><a href="#异步任务：" class="headerlink" title="异步任务："></a>异步任务：</h3><p>异步任务是指不进入主线程，而进入“任务队列”，只有主线程任务执行完毕后，“任务队列”才开始通知主线程请求执行任务，该任务才会进入主线程执行。</p>
<p>异步任务是通过回调函数实现的。有以下三个种类：</p>
<ol>
<li>普通事件，如onclick,resize等</li>
<li>资源加载，如load，error等</li>
<li>定时器，如setInterval,setTimeout等</li>
</ol>
<h2 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h2><p>在DOM中，所有的HTML元素都被定义为<strong>对象</strong>。通过DOM，JS可以删除或添加HTML元素，可以改变HTML元素的内容</p>
<h3 id="获取页面中的元素"><a href="#获取页面中的元素" class="headerlink" title="获取页面中的元素"></a>获取页面中的元素</h3><ol>
<li><p>getElementById(<em>“id”</em>) 获取带有ID的元素对象</p>
</li>
<li><p>getElementsByTagName(<em>“name”</em>) 获取<strong>所有</strong>带有这个标签名的对象</p>
<ul>
<li>注意：即使只有一个input标签，其结果也是一个数组</li>
<li>我们可以通过length来获取HTML中指定标签的数量</li>
<li>示例1：该案例获取到了所有tagName是input的标签，是一个数组（NodeList）。如果想要获取第一个input标签，则需要写成：<code>var first = document.getElementsByTagName(&quot;input&quot;)[0];</code></li>
</ul>
<p>​    </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">var</span> x=<span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;input&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">alert</span>(x.<span class="property">length</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">&quot;myInput&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">size</span>=<span class="string">&quot;20&quot;</span> /&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">&quot;myInput&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">size</span>=<span class="string">&quot;20&quot;</span> /&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">&quot;myInput&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">size</span>=<span class="string">&quot;20&quot;</span> /&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>document.getElementsByClassName(<em>“name”</em>) 获取所有指定class名字的元素合集，即一个数组(NodeList),可以通过或因好来访问列表中的节点(索引号从0开始)</p>
<p>注意：可以通过NodeList的length属性来获得指定类名的元素的个数，并通过for循环来获取我需要的那个元素</p>
</li>
<li><p>querySelector() </p>
<p>这个方法很强大，它既可以以id来选择，也可以以class来选择，也可以根据标签名来选择。不过他只能获取到匹配你要求的<strong>第一个</strong>元素</p>
<ul>
<li><p>获取HTML中第一个id&#x3D;”div01”的元素</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#div01&quot;</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>获取HTML中第一个class&#x3D;”div01”的元素</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;.div01&quot;</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>获取HTML中第一个p元素</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;p&quot;</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>获取第一个id为”zhiruo”的p元素</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;p[id=&#x27;zhiruo&#x27;]&quot;</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>获取data_index属性为111的元素</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;[data_index=&#x27;111&#x27;]&quot;</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p>获取第一个父元素为div的p元素</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;div &gt; p&quot;</span>);</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p>querySelectorAll() 和querySelector() 用法相似，只不过它获取到的是所有满足条件的对象的NodeList。</p>
<p>对其中的节点的访问可以通过索引值得到</p>
<p>示例1：给所有具有target属性的a标签加一个边框</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;a[target]&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> i;</span><br><span class="line"><span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; x.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    x[i].<span class="property">style</span>.<span class="property">border</span> = <span class="string">&quot;10px solid red&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>示例2：给所有div中的p标签加一个背景颜色</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;div &gt; p&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> i;</span><br><span class="line"><span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; x.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    x[i].<span class="property">style</span>.<span class="property">backgroundColor</span> = <span class="string">&quot;red&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>示例3：给所有的h2,div,span标签加上背景颜色</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;h2, div, span&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> i;</span><br><span class="line"><span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; x.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    x[i].<span class="property">style</span>.<span class="property">backgroundColor</span> = <span class="string">&quot;red&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="改变HTML中元素的属性"><a href="#改变HTML中元素的属性" class="headerlink" title="改变HTML中元素的属性"></a>改变HTML中元素的属性</h3><ol>
<li><p>改变元素的innerHTML</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line">div.<span class="property">innerHTML</span> = <span class="string">&#x27;我改变了div内的文本&#x27;</span></span><br></pre></td></tr></table></figure>

<p>另：将其中的文本改成h2的文本(因为innerHTML识别标签，如果这里用innerTEXT就不行了，它不识别标签，用起来不方便)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line">            div.<span class="property">innerHTML</span> = <span class="string">&#x27;&lt;h2&gt;我改变了div内的文本&lt;/h2&gt;&#x27;</span></span><br></pre></td></tr></table></figure>

<p>另：获取innerHTML的内容(不仅保留空格、换行，还保留标签)</p>
<p>比如下面这个案例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是h1字体<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> div = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(div.<span class="property">innerHTML</span>);</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>打印结果：        <code>&lt;h1&gt;这是h1字体&lt;/h1&gt;</code></p>
</li>
<li><p>改变元素的属性值① （主要针对内置属性） element.attribute &#x3D; new value </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">var</span> div = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line"> div.<span class="property">id</span> = <span class="string">&#x27;content1&#x27;</span>;<span class="comment">//将div标签的id从content改为content1</span></span><br><span class="line">div.<span class="property">className</span> = <span class="string">&quot;haha&quot;</span>; <span class="comment">//注意不是class</span></span><br></pre></td></tr></table></figure>

<p>改变 HTML 元素的属性值②（主要设置自定义属性）  element.setAttribute(attribute, value) </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line">div.<span class="title function_">setAttribute</span>(<span class="string">&#x27;id&#x27;</span>,<span class="string">&#x27;content1&#x27;</span>)<span class="comment">//将div标签的id从content改为content1</span></span><br><span class="line">div.<span class="title function_">setAttribute</span>(<span class="string">&#x27;name&#x27;</span>,<span class="string">&#x27;haha&#x27;</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>改变HTML元素的CSS样式  element.style.property &#x3D; new style</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line">           div.<span class="property">style</span>.<span class="property">background</span> = <span class="string">&quot;red&quot;</span>;<span class="comment">//将div标签背景修改为 红色</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="增添HTML元素"><a href="#增添HTML元素" class="headerlink" title="增添HTML元素"></a>增添HTML元素</h3><ol>
<li><p>在原有基础上添加innerHTML的内容（用到了字符串拼接）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">container.<span class="property">innerHTML</span> = container.<span class="property">innerHTML</span> + <span class="string">&#x27;&lt;h3&gt;追加内容为H3标签&lt;/h3&gt;&#x27;</span>;</span><br></pre></td></tr></table></figure>

<p>也可以用+&#x3D;的写法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">container.<span class="property">innerHTML</span> += <span class="string">&#x27;&lt;h3&gt;追加内容为H3标签&lt;/h3&gt;&#x27;</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p>createElement：增添元素</p>
<p>增添一个h1标题，里面的内容是hello</p>
<p>因为HTML元素通常是由元素节点和文本节点构成，比如<code>&lt;h1&gt;hello&lt;/h1&gt;</code>中元素节点是h1，文本节点是hello。所以应该这样写：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> h=<span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;h1&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> t=<span class="variable language_">document</span>.<span class="title function_">createTextNode</span>(<span class="string">&quot;hello&quot;</span>); </span><br><span class="line">h.<span class="title function_">appendChild</span>(t);<span class="comment">//在标签中添加文字</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(h); <span class="comment">//将标签添加到页面中</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>setAttribute():  给dom增添自定义属性</p>
<p>语法：<code>element.setAttribute(attributename,attributevalue)</code></p>
<p>示例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>1<span class="tag">&lt;/<span class="name">span</span>&gt;</span>,</span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>2<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>3<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>4<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>5<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>给span增添index属性</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> pra = <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&#x27;span&#x27;</span>);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>; i&lt; <span class="number">5</span>;i++)&#123;</span><br><span class="line">    pra[i].<span class="title function_">setAttribute</span>(<span class="string">&#x27;index&#x27;</span>, i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>document.appendChild(<em>element</em>) ：将该节点添加到父元素的<strong>最后一个子节点后面</strong></p>
</li>
<li><p>node.cloneNode()：拷贝节点</p>
<p>深拷贝：将节点中的子节点也一起复制，则括号里填写true</p>
<p>浅拷贝（默认）：不复制该节点的子节点，只复制标签，连文本也不复制，则括号里填false或者啥都不写。</p>
<p>示例：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ul=<span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;ul&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> copy=ul.<span class="property">children</span>[<span class="number">0</span>].<span class="title function_">cloneNode</span>(<span class="literal">true</span>);</span><br><span class="line">ul.<span class="title function_">appendChild</span>(copy); <span class="comment">//克隆出来之后别忘了把它d</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="删减HTML元素"><a href="#删减HTML元素" class="headerlink" title="删减HTML元素"></a>删减HTML元素</h3><ol>
<li><p>removeChild()   移除子元素 ，如果该子元素里面还有子元素，也会被一起移除</p>
<p>注意：括号中填写的是Node object类型的，是一个节点对象。不是要删除子节点的id值或者class值。即：要删除子节点，必须先获取到子节点才行。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--示例HTML代码--&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;top&quot;</span> <span class="attr">align</span>=<span class="string">&quot;center&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;nested&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 先定位父节点,然后删除其子节点</span></span><br><span class="line"><span class="keyword">var</span> d = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;top&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> d_nested = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;nested&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> throwawayNode = d.<span class="title function_">removeChild</span>(d_nested);</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 无须定位父节点,通过parentNode属性直接删除自身</span></span><br><span class="line"><span class="keyword">var</span> node = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;nested&quot;</span>);</span><br><span class="line"><span class="keyword">if</span> (node.<span class="property">parentNode</span>) &#123;</span><br><span class="line">  node.<span class="property">parentNode</span>.<span class="title function_">removeChild</span>(node);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 移除一个元素节点的所有子节点</span></span><br><span class="line"><span class="keyword">var</span> element = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;top&quot;</span>);</span><br><span class="line"><span class="keyword">while</span> (element.<span class="property">firstChild</span>) &#123; <span class="comment">//div还有子节点，循环继续</span></span><br><span class="line">  element.<span class="title function_">removeChild</span>(element.<span class="property">firstChild</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>移除元素的属性</p>
<p>removeAttribute(“属性”)；</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">div.<span class="title function_">removeAttribute</span>(<span class="string">&quot;index&quot;</span>);</span><br><span class="line">div.<span class="title function_">removeAttribute</span>(<span class="string">&quot;class&quot;</span>);</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="案例：动态生成表格"><a href="#案例：动态生成表格" class="headerlink" title="案例：动态生成表格"></a>案例：动态生成表格</h3><ol>
<li><p>生成学生数据</p>
<p>因为还没有学习数据库，所以在JS中创建对象来存储数据。</p>
<p>如果按照我的思路，我会创建很多个对象来存储每个人的数据，但老师在这里创建了一个数组，每个数组是对象类型的，妙啊。</p>
<p>这样就可以通过数组的length来动态获取对象的个数，很方便。</p>
<p><strong>注意</strong>：每个对象之间用逗号分隔</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> datas = [&#123;</span><br><span class="line">           <span class="attr">name</span>: <span class="string">&#x27;魏璎珞&#x27;</span>,</span><br><span class="line">           <span class="attr">subject</span>: <span class="string">&#x27;JavaScript&#x27;</span>,</span><br><span class="line">           <span class="attr">score</span>: <span class="number">100</span></span><br><span class="line">       &#125;, &#123;</span><br><span class="line">           <span class="attr">name</span>: <span class="string">&#x27;弘历&#x27;</span>,</span><br><span class="line">           <span class="attr">subject</span>: <span class="string">&#x27;JavaScript&#x27;</span>,</span><br><span class="line">           <span class="attr">score</span>: <span class="number">98</span></span><br><span class="line">       &#125;, &#123;</span><br><span class="line">           <span class="attr">name</span>: <span class="string">&#x27;傅恒&#x27;</span>,</span><br><span class="line">           <span class="attr">subject</span>: <span class="string">&#x27;JavaScript&#x27;</span>,</span><br><span class="line">           <span class="attr">score</span>: <span class="number">99</span></span><br><span class="line">       &#125;, &#123;</span><br><span class="line">           <span class="attr">name</span>: <span class="string">&#x27;明玉&#x27;</span>,</span><br><span class="line">           <span class="attr">subject</span>: <span class="string">&#x27;JavaScript&#x27;</span>,</span><br><span class="line">           <span class="attr">score</span>: <span class="number">88</span></span><br><span class="line">       &#125;, &#123;</span><br><span class="line">           <span class="attr">name</span>: <span class="string">&#x27;大猪蹄子&#x27;</span>,</span><br><span class="line">           <span class="attr">subject</span>: <span class="string">&#x27;JavaScript&#x27;</span>,</span><br><span class="line">           <span class="attr">score</span>: <span class="number">0</span></span><br><span class="line">       &#125;];</span><br></pre></td></tr></table></figure>
</li>
<li><p>分析表格的结构</p>
<p><img src="/../img/JS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E8%87%AA%E7%94%A8%EF%BC%89/image-20220406113534393.png" alt="image-20220406113534393"></p>
</li>
<li><p>总体思路</p>
<ul>
<li>先创建表头th（表头是定死的）</li>
<li>再创建行tr</li>
<li>再填充每行的内容（先填充前三列，然后填充最后一列）</li>
</ul>
</li>
<li><p>创建表头</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">thead</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>姓名<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>科目<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>成绩<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>操作<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;/<span class="name">thead</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>注意for循环的另外一种写法(针对对象的for循环)</p>
<p>比如：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">   <span class="keyword">var</span> sister= &#123;</span><br><span class="line">      <span class="attr">name</span>:<span class="string">&quot;甄嬛&quot;</span>,</span><br><span class="line">      <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> k <span class="keyword">in</span> sister) &#123;</span><br><span class="line">  <span class="comment">// k 得到的是属性名,即name和age</span></span><br><span class="line">   <span class="comment">//obj[k] 得到是属性值，即“甄嬛”和18</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><pre class="line-numbers language-js"><code class="language-js"> <span class="token keyword">var</span> tbody <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"tbody"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> datas<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment" spellcheck="true">//生成一行</span>
        <span class="token keyword">var</span> tr <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"tr"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        tbody<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>tr<span class="token punctuation">)</span><span class="token punctuation">;</span>
        
        <span class="token comment" spellcheck="true">//生成每行的前三个td</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> k <span class="token keyword">in</span> datas<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> td <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"td"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            td<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> datas<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>k<span class="token punctuation">]</span><span class="token punctuation">;</span>
            tr<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>td<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        
        <span class="token comment" spellcheck="true">//生成每行的最后那个删除</span>
        <span class="token keyword">var</span> shanchu <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"td"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        shanchu<span class="token punctuation">.</span>innerHTML<span class="token operator">=</span><span class="token string">'&lt;a href="#">删除&lt;/a>'</span> <span class="token comment" spellcheck="true">//注意不能都用双引号，单引号双引号交替着来</span>
        tr<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>shanchu<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
   
    <span class="token comment" spellcheck="true">//给a标签绑定单击响应函数</span>
    <span class="token keyword">var</span> aa<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>aa<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        aa<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>onclick<span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
 <span class="token comment" spellcheck="true">//这个地方必须写this，不能写aa[i]，打印出来aa[i]是undefined，this是&lt;a href="#">删除&lt;/a>，很怪，到现在还没有弄清楚原因</span>
            tbody<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span>parentNode<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span>figure <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"highlight plaintext"</span><span class="token operator">></span><span class="token operator">&lt;</span>table<span class="token operator">></span><span class="token operator">&lt;</span>tr<span class="token operator">></span><span class="token operator">&lt;</span>td <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"gutter"</span><span class="token operator">></span><span class="token operator">&lt;</span>pre<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">1</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">2</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">3</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">4</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">5</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">6</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">7</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">8</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">9</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">10</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">11</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">12</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">13</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">14</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">15</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">16</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">17</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">18</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">19</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">20</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">21</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">22</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">23</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">24</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">25</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">26</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">27</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">28</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">29</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">30</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">31</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">32</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">33</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">34</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">35</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">36</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">37</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">38</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">39</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">40</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">41</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">42</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">43</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">44</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">45</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">46</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">47</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">48</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">49</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">50</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">51</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">52</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">53</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">54</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">55</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">56</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">57</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">58</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">59</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">60</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">61</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">62</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">63</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">64</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">65</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">66</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">67</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">68</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">69</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">70</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">71</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">72</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">73</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">74</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">75</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">76</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">77</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">78</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">79</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">80</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">81</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">82</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">83</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">84</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">85</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">86</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">87</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">88</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">89</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">90</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>pre<span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">></span><span class="token operator">&lt;</span>td <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"code"</span><span class="token operator">></span><span class="token operator">&lt;</span>pre<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   耶耶耶，时隔一天之后终于搞懂是什么原因了，因为单击响应函数是异步任务，当点击之后才会执行，而<span class="token keyword">for</span>循环是一开始就执行的，所以在点击的时候i已经自增到<span class="token number">4</span>了，aa<span class="token punctuation">[</span>i<span class="token punctuation">]</span>就越界了，所以是undefined。<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   原因：因为i是用<span class="token keyword">var</span>声明的，是全局变量，每一次<span class="token keyword">for</span>循环都会改变i的值。<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   改法：将<span class="token keyword">var</span> i <span class="token operator">=</span><span class="token number">0</span> <span class="token punctuation">;</span>改成<span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>让他的作用域只在块中有用。<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>### 改变css样式<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">1</span><span class="token punctuation">.</span> background属性<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> 属性                                                         <span class="token operator">|</span> 描述               <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">:</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span> <span class="token operator">|</span> <span class="token punctuation">:</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span> <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>backgroundColor<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_backgroundcolor<span class="token punctuation">.</span>asp<span class="token punctuation">)</span> <span class="token operator">|</span> 设置元素的背景颜色 <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>backgroundImage<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_backgroundimage<span class="token punctuation">.</span>asp<span class="token punctuation">)</span> <span class="token operator">|</span> 设置元素的背景图像 <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">2</span><span class="token punctuation">.</span> layout属性<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> 属性                                                         <span class="token operator">|</span> 描述                           <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token operator">|</span> <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>cursor<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_cursor<span class="token punctuation">.</span>asp<span class="token punctuation">)</span> <span class="token operator">|</span> 设置显示的指针类型             <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>height<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_height<span class="token punctuation">.</span>asp<span class="token punctuation">)</span> <span class="token operator">|</span> 设置元素的高度                 <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>overflow<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_overflow<span class="token punctuation">.</span>asp<span class="token punctuation">)</span> <span class="token operator">|</span> 规定如何处理不适合元素盒的内容 <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>display<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_display<span class="token punctuation">.</span>asp<span class="token punctuation">)</span> <span class="token operator">|</span> 设置元素如何被显示             <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>width<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_width<span class="token punctuation">.</span>asp<span class="token punctuation">)</span> <span class="token operator">|</span> 设置元素的宽度                 <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">3</span><span class="token punctuation">.</span> position属性<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> 属性                                                         <span class="token operator">|</span> 描述                                                   <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">:</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span> <span class="token operator">|</span> <span class="token punctuation">:</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span> <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>bottom<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_bottom<span class="token punctuation">.</span>asp<span class="token punctuation">)</span> <span class="token operator">|</span> 设置元素的底边缘距离父元素底边缘的之上或之下的距离     <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>left<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_left<span class="token punctuation">.</span>asp<span class="token punctuation">)</span> <span class="token operator">|</span> 置元素的左边缘距离父元素左边缘的左边或右边的距离       <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>position<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_position<span class="token punctuation">.</span>asp<span class="token punctuation">)</span> <span class="token operator">|</span> 把元素放置在<span class="token keyword">static</span><span class="token punctuation">,</span> relative<span class="token punctuation">,</span> absolute 或 fixed 的位置 <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>right<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_right<span class="token punctuation">.</span>asp<span class="token punctuation">)</span> <span class="token operator">|</span> 置元素的右边缘距离父元素右边缘的左边或右边的距离       <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>top<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_top<span class="token punctuation">.</span>asp<span class="token punctuation">)</span>  <span class="token operator">|</span> 设置元素的顶边缘距离父元素顶边缘的之上或之下的距离     <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>zIndex<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_zindex<span class="token punctuation">.</span>asp<span class="token punctuation">)</span> <span class="token operator">|</span> 设置元素的堆叠次序                                     <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">4</span><span class="token punctuation">.</span> text属性<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> 属性                                                         <span class="token operator">|</span> 描述                 <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">:</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span> <span class="token operator">|</span> <span class="token punctuation">:</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span> <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>color<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_color<span class="token punctuation">.</span>asp<span class="token punctuation">)</span> <span class="token operator">|</span> 设置文本的颜色       <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">|</span> <span class="token punctuation">[</span>fontSize<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>w3school<span class="token punctuation">.</span>com<span class="token punctuation">.</span>cn<span class="token operator">/</span>jsref<span class="token operator">/</span>prop_style_fontsize<span class="token punctuation">.</span>asp<span class="token punctuation">)</span> <span class="token operator">|</span> 设置元素的字体大小。 <span class="token operator">|</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>## BOM<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>BOM：浏览器对象模型<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>在BOM中提供了一组对象，用来完成对浏览器的操作：<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">1</span><span class="token punctuation">.</span> window：整个浏览器窗口，同时window也是网页的全局对象<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">2</span><span class="token punctuation">.</span> navigator：当前浏览器信息，可以通过该对象识别不同的浏览器<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">3</span><span class="token punctuation">.</span> location：当前浏览器地址栏信息，通过该对象可以获取地址栏信息，或者操作浏览器跳转页面<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">4</span><span class="token punctuation">.</span> history：代表浏览器的历史记录。可以操作浏览器向前或向后<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">5</span><span class="token punctuation">.</span> screen：用户的屏幕信息，通过该对线可以获取用户的显示器的相关信息<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>## 事件<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>### 元素绑定（注册）事件的格式<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">1</span><span class="token punctuation">.</span> 传统方法：<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   事件源<span class="token punctuation">.</span>事件类型<span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>  <span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   特点：绑定的事件具有<span class="token operator">**</span>唯一性<span class="token operator">**</span>，即一个元素只能绑定一个事件，后面绑定的处理函数会覆盖掉之前注册的处理函数<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">2</span><span class="token punctuation">.</span> <span class="token function">事件监听注册方式</span><span class="token punctuation">(</span>推荐<span class="token punctuation">)</span>：<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token template-string"><span class="token string">`addEventListener(type, function(){}, useCapture])`</span></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">-</span> type<span class="token punctuation">:</span> 事件类型的字符串，比如click，mouseover，注意没有on<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">-</span> listener<span class="token punctuation">:</span>事件处理函数，事件发生的时候，会调用这个监听函数<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token operator">-</span> useCapture<span class="token punctuation">:</span>可选参数，默认是<span class="token boolean">false</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   特点：同一个元素可以注册多个监听器，按照注册方式依次执行<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>### 删除（解绑）事件<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token number">1</span><span class="token punctuation">.</span> 传统方法<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   示例：当第一次点击div的时候弹出“点我干啥”，之后再点击便不再有弹窗<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>   <span class="token template-string"><span class="token string">``</span></span>`js<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>     <span class="token keyword">var</span> div<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>     div<span class="token punctuation">.</span>onclick<span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>              <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"点我干啥"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator">&lt;</span>br<span class="token operator">></span><span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"line"</span><span class="token operator">></span>          <span class="token comment" spellcheck="true">//在弹窗后便解绑事件&lt;/span>&lt;br>&lt;span class="line">              div.onclick=null;&lt;/span>&lt;br>&lt;span class="line">          }&lt;/span>&lt;br>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>&lt;/figure></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
</li>
<li><p>removeEventListener() </p>
<p>注意：用这个方法的时候就不能在绑定事件函数的时候用匿名函数绑定了，因为在解绑的时候需要解绑的函数的名字。所以在外面定义函数，在给对象绑定</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div=<span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;div&quot;</span>);</span><br><span class="line">     div.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>,fn);</span><br><span class="line">     <span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>)&#123;</span><br><span class="line">         <span class="title function_">alert</span>(<span class="string">&quot;点我干啥&quot;</span>);</span><br><span class="line">         div.<span class="title function_">removeEventListener</span>(<span class="string">&quot;click&quot;</span>,fn);</span><br><span class="line">     &#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="事件的捕获和事件的冒泡"><a href="#事件的捕获和事件的冒泡" class="headerlink" title="事件的捕获和事件的冒泡"></a>事件的捕获和事件的冒泡</h3><p><img src="/../img/JS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E8%87%AA%E7%94%A8%EF%BC%89/image-20220406163915820.png" alt="image-20220406163915820"></p>
<ul>
<li>js代码中只能执行捕获或者冒泡这两个阶段的其中一个阶段</li>
<li>onclick和attachEvent只能得到冒泡阶段</li>
<li>addEventListener 既可以选择冒泡阶段，也可以选择捕获阶段。</li>
</ul>
<h4 id="捕获阶段"><a href="#捕获阶段" class="headerlink" title="捕获阶段"></a>捕获阶段</h4><p>addEventListener()的第三个参数是 true 那么则处于<strong>捕获</strong>阶段： <strong>document -&gt; html -&gt; body -&gt; father -&gt; son</strong></p>
<p>案例：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> son = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.son&#x27;</span>);</span><br><span class="line">son.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&#x27;son&#x27;</span>);</span><br><span class="line">&#125;, <span class="literal">true</span>);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>这里如果我们点击son，会先看document有没有绑定单击函数，如果没有，会向下一级，看html有没有绑定，如果没有，会向下一级，看body有没有绑定……依次往下，直到捕获到son，发现它绑定了单击响应函数，于是弹出弹窗。</p>
<p>即  <strong>document -&gt; html -&gt; body -&gt; father -&gt; son</strong></p>
<p>如果我们将代码改成下面这样：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> son = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.son&#x27;</span>);</span><br><span class="line">    son.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">&#x27;son&#x27;</span>);</span><br><span class="line">    &#125;, <span class="literal">true</span>);</span><br><span class="line"><span class="keyword">var</span> father = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.father&#x27;</span>);</span><br><span class="line">    father.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">&#x27;father&#x27;</span>);</span><br><span class="line">    &#125;, <span class="literal">true</span>);</span><br></pre></td></tr></table></figure>

<p>因为给father绑定了单击响应函数，所以在捕获的时候，会先弹出”father”，再弹出“son”。</p>
<h4 id="冒泡阶段"><a href="#冒泡阶段" class="headerlink" title="冒泡阶段"></a>冒泡阶段</h4><p>如果addEventListener 第三个参数是 false 或者 省略 ，那么则处于<strong>冒泡</strong>阶段 ： <strong>son -&gt; father -&gt;body -&gt; html -&gt; document</strong></p>
<p>案例：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> son = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.son&#x27;</span>);</span><br><span class="line">        son.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">            <span class="title function_">alert</span>(<span class="string">&#x27;son&#x27;</span>);</span><br><span class="line">        &#125;, <span class="literal">false</span>);</span><br><span class="line"><span class="keyword">var</span> father = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.father&#x27;</span>);</span><br><span class="line">        father.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">            <span class="title function_">alert</span>(<span class="string">&#x27;father&#x27;</span>);</span><br><span class="line">        &#125;, <span class="literal">false</span>);</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">            <span class="title function_">alert</span>(<span class="string">&#x27;document&#x27;</span>);</span><br><span class="line">        &#125;)</span><br></pre></td></tr></table></figure>

<p>即点击son这个div的时候，先弹出son,再弹出father，再弹出document</p>
<h3 id="事件对象-event"><a href="#事件对象-event" class="headerlink" title="事件对象(event)"></a>事件对象(event)</h3><p>比如下面这个事件绑定函数，小括号里面就是事件对象（写在监听函数的小括号中，当作形参来看）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;div&quot;</span>);</span><br><span class="line">div.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params">xxx</span>)&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>事件对象只有触发了事件才会存在，他是系统自动给我们创建的。</p>
<p>如果我们需要使用事件对象的时候，比如获取鼠标点击时鼠标的坐标，获取键盘按下时按下的是哪个键，就在括号里填上我们给事件对象命名的名字，通常是event，e，evt</p>
<p>由于兼容性问题，ie中event应该写成window.event，所以我们通常写成下面这样</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;div&quot;</span>);</span><br><span class="line">div.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params">event</span>)&#123;</span><br><span class="line">     event=event||<span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="事件对象的常见属性和方法"><a href="#事件对象的常见属性和方法" class="headerlink" title="事件对象的常见属性和方法"></a>事件对象的常见属性和方法</h3><h4 id="event-target-获取触发事件的对象是谁"><a href="#event-target-获取触发事件的对象是谁" class="headerlink" title="event.target:获取触发事件的对象是谁"></a>event.target:获取触发事件的对象是谁</h4><p>兼容性：ie中是event.srcElement,所以通常写成：<code>var target = event.target || event.srcElement</code></p>
<p>注意这里要区分this和target的区别，this是绑定该事件函数的对象，target是触发该事件的对象。</p>
<p>示例：HTML的结构是ul中有li，我们给ul绑定了单击响应函数，因为冒泡的原因，我们在点击li的时候也会触发单击响应函数。</p>
<p>此时，触发事件的是li,绑定事件的是ul。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>abc<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>abc<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>abc<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> ul = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;ul&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">            ul.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params">e</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(e.<span class="property">target</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            &#125;)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>输出结果：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">this:&lt;ul&gt;&lt;/ul&gt;</span><br><span class="line">e&lt;li&gt;&lt;/li&gt;</span><br></pre></td></tr></table></figure>



<h2 id="定时器"><a href="#定时器" class="headerlink" title="定时器"></a>定时器</h2><h3 id="1-setInterval"><a href="#1-setInterval" class="headerlink" title="1. setInterval"></a>1. setInterval</h3><p>功能：让一段程序每间隔一段时间执行一次（循环执行）</p>
<p>语法：<code>setInterval(回调函数名，间隔时间[单位：毫秒])</code></p>
<p>返回值：返回Number类型的数字，用来作为定时器的唯一标识（区分多个定时器）</p>
<p>示例：（此时的匿名函数为回调函数)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> timer=<span class="built_in">setInterval</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="comment">//要执行的code</span></span><br><span class="line">&#125;,<span class="number">1000</span>);</span><br></pre></td></tr></table></figure>

<h4 id="2-clearInterval"><a href="#2-clearInterval" class="headerlink" title="2.clearInterval"></a>2.clearInterval</h4><p>功能：将setINterval设置的定时器关闭</p>
<p>语法：clearInterval(定时器的名字)</p>
<p>示例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">id</span>=<span class="string">&quot;count&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">     <span class="variable language_">window</span>.<span class="property">onload</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">     <span class="keyword">var</span> count = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;count&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">&#125;;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> time=<span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> timer = <span class="built_in">setInterval</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">    count.<span class="property">innerHTML</span>=num++;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">if</span>(num == <span class="number">11</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="built_in">clearInterval</span>(timer);</span></span><br><span class="line"><span class="language-javascript">&#125;</span></span><br><span class="line"><span class="language-javascript">&#125;,<span class="number">1000</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="3-setTimeout"><a href="#3-setTimeout" class="headerlink" title="3.setTimeout"></a>3.setTimeout</h3><p>功能：一个函数不马上执行，过一段时间后才执行（只执行一次）</p>
<p>语法：<code>setInterval(回调函数名，间隔时间[单位：毫秒])</code></p>
<h3 id="4-clearTimeout"><a href="#4-clearTimeout" class="headerlink" title="4.clearTimeout"></a>4.clearTimeout</h3><p>功能：关闭setTimeout设置的延时器</p>
<p>语法：clearTimeout(延时器的名字)</p>
<h2 id="JS和C语言的不同之处"><a href="#JS和C语言的不同之处" class="headerlink" title="JS和C语言的不同之处"></a>JS和C语言的不同之处</h2><ol>
<li><p>JS中声明变量用的是let或者var,它是一种弱类型语言（动态语言），不用声明变量的类型，并且变量的数据类型是可以变化的，比如：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name =<span class="string">&quot;zhiruo&quot;</span>;</span><br><span class="line">name = <span class="number">123</span>; <span class="comment">//这里强制将字符串类型转化为了数值类型</span></span><br></pre></td></tr></table></figure>



<p>并且，JS中变量可以不用声明直接赋值  </p>
</li>
<li><p>JS中没有字符类型，只有字符串类型，并且字符串既可以用双引号引起来，也可以用单引号引起来</p>
</li>
<li><p>JS中字符串的长度用的是<code>str.length;</code>而C++中字符串的长度用的是<code>str.length()</code></p>
</li>
<li><p>+号</p>
</li>
</ol>
<p>在C语言中，+号就是加号，而在JS中”+“有可能是加号（数值相加），也有可能是连字符（字符串拼接），类似C++中的运算符重载。要区分清楚以下几种情况：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;我&quot;</span> + <span class="string">&quot;爱&quot;</span> + <span class="string">&quot;你&quot;</span>);	<span class="comment">//连字符，把三个独立的汉字，连接在一起了</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;我+爱+你&quot;</span>);			<span class="comment">//原样输出</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>+<span class="number">2</span>+<span class="number">3</span>);				<span class="comment">//输出6</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">5</span>+<span class="string">&#x27;3&#x27;</span>);	</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">5</span>-<span class="string">&#x27;3&#x27;</span>);	</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">我爱你</span><br><span class="line">我+爱+你</span><br><span class="line">6</span><br><span class="line">53</span><br><span class="line">2</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ul>
<li>如果加号两边都是Number类型，那么就是数字相加，否则，就是连字符相加</li>
<li>如果符号是减号，除号，乘号，取模运算符，计算机会帮忙进行隐式转换，即5-’3‘的运算结果是2</li>
</ul>
<ol start="5">
<li><p>JS中的函数可以嵌套定义,c语言不可以</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> a = <span class="number">10</span>;</span><br><span class="line">    <span class="comment">//fn1中嵌套定义了fn2</span></span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">fn2</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(a);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//调用fn2</span></span><br><span class="line">    <span class="title function_">fn2</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn1</span>();</span><br></pre></td></tr></table></figure>

<ul>
<li>函数fn2只能在fn1中调用，如果在fn1外面调用，将会报错</li>
<li>如果嵌套的内层函数使用了外层函数的变量或参数，即fn2中使用了fn1中的变量a，这个嵌套函数就形成了一个闭包</li>
<li>闭包能在它fn1执行完之后仍然能够访问fn1里的变量和参数</li>
</ul>
</li>
<li><p>JS是<strong>基于对象（object-based）的语言</strong>。 但是，它又不是一种真正的面向对象编程语言，因为它的语法中没有C++中的class（类）（在es6以前）。在C++中，“类”就是对象的模板，对象就是“类”的实例。JS不是基于类的，二十基于构造函数和原型链的。</p>
<p>即：JS使用构造函数来作为对象的模板，构造函数就是专门生成实例对象的函数</p>
</li>
</ol>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E7%AC%94%E8%AE%B0/" rel="tag"># 笔记</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2022/02/28/%E4%B8%80%E4%BA%9B%E5%A5%BD%E7%94%A8%E7%9A%84%E7%BD%91%E7%AB%99/" rel="prev" title="一些好用的网站">
      <i class="fa fa-chevron-left"></i> 一些好用的网站
    </a></div>
      <div class="post-nav-item">
    <a href="/2022/03/18/%E9%93%BE%E8%A1%A8%E7%AC%AC%E4%B8%80%E6%AC%A1%E4%BD%9C%E4%B8%9A/" rel="next" title="链表第一次作业">
      链表第一次作业 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6"><span class="nav-number">1.</span> <span class="nav-text">事件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8B%96%E6%8B%BDbox%E5%85%83%E7%B4%A0"><span class="nav-number">1.1.</span> <span class="nav-text">拖拽box元素</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JS%E7%9A%84%E5%B8%B8%E7%94%A8%E4%B9%A6%E5%86%99%E6%96%B9%E5%BC%8F"><span class="nav-number">2.</span> <span class="nav-text">JS的常用书写方式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%86%85%E5%B5%8C%E5%BC%8F"><span class="nav-number">2.1.</span> <span class="nav-text">内嵌式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A4%96%E9%93%BE%E5%BC%8F"><span class="nav-number">2.2.</span> <span class="nav-text">外链式</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JS%E8%BE%93%E5%87%BA%E8%AF%AD%E5%8F%A5"><span class="nav-number">3.</span> <span class="nav-text">JS输出语句</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JS%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="nav-number">4.</span> <span class="nav-text">JS数据类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JS%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%8B%BC%E6%8E%A5"><span class="nav-number">5.</span> <span class="nav-text">JS的字符串拼接</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8B%BC%E6%8E%A5%E8%AF%AD%E6%B3%95%EF%BC%9A"><span class="nav-number">5.1.</span> <span class="nav-text">拼接语法：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8B%BC%E6%8E%A5%E8%A7%84%E5%88%99%EF%BC%9A"><span class="nav-number">5.2.</span> <span class="nav-text">拼接规则：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E4%B8%BE%E4%BE%8B%EF%BC%9A"><span class="nav-number">5.3.</span> <span class="nav-text">代码举例：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1"><span class="nav-number">6.</span> <span class="nav-text">对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%88%86%E7%B1%BB"><span class="nav-number">6.1.</span> <span class="nav-text">对象的分类</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%88%9B%E5%BB%BA%E6%96%B9%E6%B3%95"><span class="nav-number">6.2.</span> <span class="nav-text">对象的创建方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%B5%8B%E5%80%BC%E5%92%8C%E4%BF%AE%E6%94%B9"><span class="nav-number">6.3.</span> <span class="nav-text">对象的赋值和修改</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96%E5%AF%B9%E8%B1%A1%E4%B8%AD%E7%9A%84%E5%B1%9E%E6%80%A7%EF%BC%9A"><span class="nav-number">6.3.1.</span> <span class="nav-text">获取对象中的属性：</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E5%8C%85%E8%A3%85%E7%B1%BB%E5%9E%8B"><span class="nav-number">7.</span> <span class="nav-text">基本包装类型</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%89%E4%B8%AA%E5%9F%BA%E6%9C%AC%E5%8C%85%E8%A3%85%E7%B1%BB%EF%BC%9A"><span class="nav-number">7.1.</span> <span class="nav-text">三个基本包装类：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BD%AC%E6%8D%A2%E6%96%B9%E6%B3%95%EF%BC%9A"><span class="nav-number">7.2.</span> <span class="nav-text">转换方法：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#String-%E5%AF%B9%E8%B1%A1%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95"><span class="nav-number">7.3.</span> <span class="nav-text">String()对象常用方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Number-%E5%AF%B9%E8%B1%A1%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95"><span class="nav-number">7.4.</span> <span class="nav-text">Number()对象常用方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Math-%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E6%B3%95"><span class="nav-number">7.5.</span> <span class="nav-text">Math()对象的方法</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B0%E7%BB%84"><span class="nav-number">8.</span> <span class="nav-text">数组</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1"><span class="nav-number">8.1.</span> <span class="nav-text">创建数组对象</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%87%BD%E6%95%B0"><span class="nav-number">9.</span> <span class="nav-text">函数</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E7%9A%84%E5%AE%9A%E4%B9%89"><span class="nav-number">9.1.</span> <span class="nav-text">函数的定义</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E7%9A%84%E8%B0%83%E7%94%A8"><span class="nav-number">9.2.</span> <span class="nav-text">函数的调用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E7%9A%84%E4%BC%A0%E5%8F%82"><span class="nav-number">9.3.</span> <span class="nav-text">函数的传参</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B0%83%E7%94%A8%E5%87%BD%E6%95%B0%E5%92%8C%E8%8E%B7%E5%8F%96%E5%87%BD%E6%95%B0%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">9.4.</span> <span class="nav-text">调用函数和获取函数的区别</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0"><span class="nav-number">9.5.</span> <span class="nav-text">构造函数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E5%92%8C%E6%99%AE%E9%80%9A%E5%87%BD%E6%95%B0"><span class="nav-number">9.5.1.</span> <span class="nav-text">构造函数和普通函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B9%A6%E5%86%99%E8%A7%84%E8%8C%83%EF%BC%9A"><span class="nav-number">9.5.2.</span> <span class="nav-text">书写规范：</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#New%E4%B8%80%E4%B8%AA%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%9A%84%E6%B5%81%E7%A8%8B"><span class="nav-number">9.5.3.</span> <span class="nav-text">New一个构造函数的流程</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AE%9E%E4%BE%8B%E6%88%90%E5%91%98%E5%92%8C%E5%8A%A8%E6%80%81%E6%88%90%E5%91%98"><span class="nav-number">9.5.4.</span> <span class="nav-text">实例成员和动态成员</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0"><span class="nav-number">9.6.</span> <span class="nav-text">高阶函数</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BD%9C%E7%94%A8%E5%9F%9F%EF%BC%9A"><span class="nav-number">10.</span> <span class="nav-text">作用域：</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%86%E7%B1%BB%EF%BC%9A"><span class="nav-number">10.1.</span> <span class="nav-text">分类：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%BF%E9%97%AE%E5%85%B3%E7%B3%BB%EF%BC%9A"><span class="nav-number">10.2.</span> <span class="nav-text">访问关系：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%97%AD%E5%8C%85"><span class="nav-number">11.</span> <span class="nav-text">闭包</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B8%B8%E8%A7%84%E6%83%85%E5%86%B5%E4%B8%8B%EF%BC%9A"><span class="nav-number">11.1.</span> <span class="nav-text">常规情况下：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AD%E5%8C%85%E5%87%BD%E6%95%B0%E4%B8%AD%EF%BC%9A"><span class="nav-number">11.2.</span> <span class="nav-text">闭包函数中：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AD%E5%8C%85%E7%9A%84%E4%BD%9C%E7%94%A8"><span class="nav-number">11.3.</span> <span class="nav-text">闭包的作用</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#this"><span class="nav-number">12.</span> <span class="nav-text">this</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%90%8C%E6%AD%A5%E5%92%8C%E5%BC%82%E6%AD%A5"><span class="nav-number">13.</span> <span class="nav-text">同步和异步</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#JS%E6%98%AF%E5%8D%95%E7%BA%BF%E7%A8%8B"><span class="nav-number">13.1.</span> <span class="nav-text">JS是单线程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0"><span class="nav-number">13.2.</span> <span class="nav-text">回调函数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%90%8C%E6%AD%A5"><span class="nav-number">13.3.</span> <span class="nav-text">同步</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%82%E6%AD%A5"><span class="nav-number">13.4.</span> <span class="nav-text">异步</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JS%E7%9A%84%E6%89%A7%E8%A1%8C%E6%9C%BA%E5%88%B6"><span class="nav-number">13.5.</span> <span class="nav-text">JS的执行机制</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%90%8C%E6%AD%A5%E4%BB%BB%E5%8A%A1%EF%BC%9A"><span class="nav-number">13.6.</span> <span class="nav-text">同步任务：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%82%E6%AD%A5%E4%BB%BB%E5%8A%A1%EF%BC%9A"><span class="nav-number">13.7.</span> <span class="nav-text">异步任务：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DOM"><span class="nav-number">14.</span> <span class="nav-text">DOM</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96%E9%A1%B5%E9%9D%A2%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0"><span class="nav-number">14.1.</span> <span class="nav-text">获取页面中的元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%94%B9%E5%8F%98HTML%E4%B8%AD%E5%85%83%E7%B4%A0%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="nav-number">14.2.</span> <span class="nav-text">改变HTML中元素的属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A2%9E%E6%B7%BBHTML%E5%85%83%E7%B4%A0"><span class="nav-number">14.3.</span> <span class="nav-text">增添HTML元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%A0%E5%87%8FHTML%E5%85%83%E7%B4%A0"><span class="nav-number">14.4.</span> <span class="nav-text">删减HTML元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A1%88%E4%BE%8B%EF%BC%9A%E5%8A%A8%E6%80%81%E7%94%9F%E6%88%90%E8%A1%A8%E6%A0%BC"><span class="nav-number">14.5.</span> <span class="nav-text">案例：动态生成表格</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E7%9A%84%E6%8D%95%E8%8E%B7%E5%92%8C%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%86%92%E6%B3%A1"><span class="nav-number">14.6.</span> <span class="nav-text">事件的捕获和事件的冒泡</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8D%95%E8%8E%B7%E9%98%B6%E6%AE%B5"><span class="nav-number">14.6.1.</span> <span class="nav-text">捕获阶段</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%86%92%E6%B3%A1%E9%98%B6%E6%AE%B5"><span class="nav-number">14.6.2.</span> <span class="nav-text">冒泡阶段</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1-event"><span class="nav-number">14.7.</span> <span class="nav-text">事件对象(event)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B8%B8%E8%A7%81%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95"><span class="nav-number">14.8.</span> <span class="nav-text">事件对象的常见属性和方法</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#event-target-%E8%8E%B7%E5%8F%96%E8%A7%A6%E5%8F%91%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%AF%B9%E8%B1%A1%E6%98%AF%E8%B0%81"><span class="nav-number">14.8.1.</span> <span class="nav-text">event.target:获取触发事件的对象是谁</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9A%E6%97%B6%E5%99%A8"><span class="nav-number">15.</span> <span class="nav-text">定时器</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-setInterval"><span class="nav-number">15.1.</span> <span class="nav-text">1. setInterval</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-clearInterval"><span class="nav-number">15.1.1.</span> <span class="nav-text">2.clearInterval</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-setTimeout"><span class="nav-number">15.2.</span> <span class="nav-text">3.setTimeout</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-clearTimeout"><span class="nav-number">15.3.</span> <span class="nav-text">4.clearTimeout</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JS%E5%92%8CC%E8%AF%AD%E8%A8%80%E7%9A%84%E4%B8%8D%E5%90%8C%E4%B9%8B%E5%A4%84"><span class="nav-number">16.</span> <span class="nav-text">JS和C语言的不同之处</span></a></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="芷若"
      src="/images/touxiang.jpg">
  <p class="site-author-name" itemprop="name">芷若</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">19</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">5</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/zhiruo" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;zhiruo" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
  </div>



      </div>
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        
  <div class="beian"><a href="https://beian.miit.gov.cn/" rel="noopener" target="_blank">陕ICP备2022001874号 </a>
      <img src="http://www.beian.gov.cn/portal/download" style="display: inline-block;">
  </div>

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="芷若"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">芷若</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
      <span class="post-meta-item-text">站点总字数：</span>
    <span title="站点总字数">105k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span class="post-meta-item-text">站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">1:35</span>
</div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  




  
<script src="//cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
<script src="//cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js"></script>
<script src="/js/algolia-search.js"></script>














  

  

  

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/assets/koharu.model.json"},"display":{"position":"right","width":145,"height":315},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.8},"log":false});</script></body>
</html>
